import Sheet from '../component/sheet';
import { h } from '../component/element';
import { cssPrefix } from '../config';

import myData from "./myData";

export default class MyWebSocket{
  constructor(rootEl, targetEl, spreadsheet, res){
    console.log(myData.there)
    this.spreadsheet = spreadsheet;
    this.data = res.data;
    this.myAreaArr = res.sheet;
    this.rootEl = rootEl;
    this.targetEl = targetEl;

    let myAreaArr = res.sheet;
    this.rootEl.rootEl = h('div', `${cssPrefix}`).on('contextmenu', evt => evt.preventDefault());
    // if(myData.there.isFirst){
    this.sheet = new Sheet(rootEl, spreadsheet.data, myAreaArr);
    // }
    this.rootEl.child(spreadsheet.bottombar.el); //添加底部
    this.chuli()
    // console.log('rootEl',targetEl.children[0].children[1].children,rootEl)
    // targetEl.children[0].children[1].children[1].innerHTML = rootEl.el.children[1].children[1].innerHTML
    // this.targetEl.replaceChildren(rootEl.el);
    myData.there.isFirst = false;
  }

  loadData(){
    this.spreadsheet.loadData(this.data).change(() => {
      console.log('>>>', this.spreadsheet.getData());
    })
    if(this.targetEl.childNodes.length > 1){
      this.targetEl.removeChild(this.targetEl.childNodes[1])
      this.chuli()
    }
    // console.log('rootEl',this.targetEl.childNodes,this.rootEl)
    // this.rootEl.child(_this.spreadsheet.bottombar.el); //添加底部
    // this.targetEl.replaceChildren(_this.rootEl.el);
  }

  chuli(){
    let targetElChildren = this.targetEl.children[0].children[1].children[1].children[0];
    let rootElChildren = this.rootEl.el.children[1].children[1].children[0];
    let myEl = []
    for(let idx = targetElChildren.childNodes.length - 1;idx > 1 ;idx--){
      targetElChildren.childNodes[idx].innerHTML = rootElChildren.childNodes[idx].innerHTML
      myEl.push(targetElChildren.childNodes[idx])
    }
    myData.there.myEl = myEl;
  }
}